﻿define([
    'domReady!',
    'jquery-confirm',
    'bootstrap-table',
    'bootstrap-table-zh-CN',
    'bootstrap-table-treegrid',
    'jquery-treegrid',
    'bootstrap-select',
    'defaults-zh_CN',
    'lyear-loading',
    'validate',
    'validate_config',
    'jquery.ajaxRequest'
], function (domReady) {
    // tree-grid使用
    var $treeTable = $('.tree-table');
    //表单验证
    var v = $("#form").validate({
        rules: {
            name: {
                required: true
            },

        },
        messages: {
            name: {
                required: "菜单名称不能为空"
            },

        }
    });
    function init() {
        //选择控件初始化
        $('#pid').selectpicker();
        //表格控件初始化

        //页面数据绑定
        dataBind();
    }

    //表格数据请求
    function dataBind(isRefresh = false) {
        if (isRefresh) {
            $('.page-loading').ajaxRequest("/BMS/Function/GetList", { name: "", type: 0 }, function (data) { refreshTable(data.data.tableData); bindMenuSelect(data.data.menuSelectData); }, true, false);
        } else {

            $('.page-loading').ajaxRequest("/BMS/Function/GetList", { name: "", type: 0 }, function (data) { bindTable(data.data.tableData); bindMenuSelect(data.data.menuSelectData); }, true, false);
        }

    }

    function refreshTable(data) {
        $treeTable.bootstrapTable('load', data);
    }
    /**
     * 菜单下拉控件数据绑定
     * @param {any} data
     */
    function bindMenuSelect(data) {
        $("#pid").html("");
        var html = "<option data-subtext='' value='0'>---根菜单---</option>";
        $("#pid").append(html);
        $.each(data, function (index, value) {
            var html = '<option data-subtext="' + value.pathName + '" value="' + value.id + '">' + value.name + '</option>';
            $("#pid").append(html);
            childMenu(value.child)
        })

        $('#pid').selectpicker('refresh');
    }
    function childMenu(child) {
        if (child.length == 0) {
            return;
        }
        $.each(child, function (index, value) {
            var html = '<option data-subtext="' + value.pathName + '" value="' + value.id + '">' + value.name + '</option>';
            $("#pid").append(html);
            childMenu(value.child)
        })
    }
    /**
     * 表格数据绑定
     * @param {any} data
     */
    function bindTable(data) {
        $treeTable.bootstrapTable({
            data: data,
            idField: 'id',
            uniqueId: 'id',
            dataType: 'json',
            columns: [
                {
                    field: 'check',
                    checkbox: true
                },
                {
                    field: 'id',
                    title: 'ID'
                },
                {
                    field: 'name',
                    title: '名称',
                    width: 200
                },
                //{
                //    field: 'status',
                //    title: '状态',
                //    sortable: true,
                //    /*
                //     * 可以选择采用开关来处理状态显示
                //     * 或者采用上个示例的处理方式
                //     */
                //    formatter: function (value, row, index) {
                //        if (value == 0) {
                //            is_checked = '';
                //        } else if (value == 1) {
                //            is_checked = 'checked="checked"';
                //        }
                //        result = '<div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" id="customSwitch' + row.id + '" ' + is_checked + '><label class="custom-control-label" for="customSwitch' + row.id + '" onClick="updateStatus(' + row.id + ', ' + value + ')"></label></div>';

                //        return result;
                //    },
                //},
                {
                    field: 'path',
                    title: '层级路径'
                },
                {
                    field: 'url',
                    title: '页面路径'
                },
                {
                    field: 'iconClassName',
                    title: 'icon图标',
                    align: 'center',
                    formatter: function (value, row, index) {

                        result = '<i class="mdi ' + value + '"></i>';

                        return result;
                    },
                },
                {
                    field: 'lastUser',
                    title: '操作人'
                },
                {
                    field: 'lastTime',
                    title: '操作时间'
                },
                {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    width: 320,
                    events: {

                        'click .role-delete': function (e, value, row, index) {
                            del(row.id);
                        },
                        'click .role-edit': function (e, value, row, index) {
                            update(row);
                        },
                        'click .role-up': function (e, value, row, index) {
                            move(row.id, 1);
                        },
                        'click .role-down': function (e, value, row, index) {
                            move(row.id, 2);
                        },
                    },
                    formatter: operateFormatter
                }
            ],

            treeShowField: 'name',
            parentIdField: 'pid',

            onResetView: function (data) {
                $treeTable.treegrid({
                    initialState: 'collapsed', // 所有节点都折叠
                    treeColumn: 2,
                    //expanderExpandedClass: 'mdi mdi-folder-open',  // 可自定义图标样式
                    //expanderCollapsedClass: 'mdi mdi-folder',
                });

                // 只展开树形的第一集节点
                $treeTable.treegrid('getRootNodes').treegrid('expand');
            },
            onCheck: function (row) {
                var datas = $treeTable.bootstrapTable('getData');

                selectChilds(datas, row, 'id', 'pid', true); // 选择子类

                selectParentChecked(datas, row, 'id', 'pid'); // 选择父类

                $treeTable.bootstrapTable('load', datas);
            },

            onUncheck: function (row) {
                var datas = $treeTable.bootstrapTable('getData');
                selectChilds(datas, row, 'id', 'pid', false);
                $treeTable.bootstrapTable('load', datas);
            },
        });
    }

    // 操作按钮
    function operateFormatter(value, row, index) {
        return [
            '<a type="button" class="role-add btn btn-xs btn-default m-r-5 ' + (row.isShowAdd ? '' : 'hide') + '" title="功能" data-toggle="tooltip" href="/BMS/Function/List/' + row.id + '"><i class="mdi mdi-plus"></i>功能</a>',
            '<a type="button" class="role-edit btn btn-xs btn-default m-r-5" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i>编辑</a>',
            '<a type="button" class="role-up btn btn-xs btn-default m-r-5 ' + (row.isAllowUp ? '' : 'disabled') + '" title="上移" data-toggle="tooltip"><i class="mdi mdi-chevron-up-circle"></i>上移</a>',
            '<a type="button" class="role-down btn btn-xs btn-default m-r-5 ' + (row.isAllowDown ? '' : 'disabled') + '" title="下移" data-toggle="tooltip"><i class="mdi mdi-chevron-down-circle"></i>下移</a>',
            '<a type="button" class="role-delete btn btn-xs btn-default" title="删除" data-toggle="tooltip"><i class="mdi mdi-delete"></i>删除</a>'
        ].join('');
    }

    /**
     * 选中父项时，同时选中子项
     * @param datas 所有的数据
     * @param row 当前数据
     * @param id id 字段名
     * @param pid 父id字段名
     */
    function selectChilds(datas, row, id, pid, checked) {
        for (var i in datas) {
            if (datas[i][pid] == row[id]) {
                datas[i].check = checked;
                selectChilds(datas, datas[i], id, pid, checked);
            };
        }
    }

    function selectParentChecked(datas, row, id, pid) {
        for (var i in datas) {
            if (datas[i][id] == row[pid]) {
                datas[i].check = true;
                selectParentChecked(datas, datas[i], id, pid);
            };
        }
    }

  
    function move(id, way) {
        $(this).ajaxRequest("/BMS/Function/Move", { id: id, way: way }, function () { dataBind(true) },false);
       
    }
    function del(id) {
        $.confirm({
            title: '操作确认',
            content: '确定要删除吗？',
            escapeKey: 'cancelAction',
            buttons: {
                confirm: {
                    btnClass: 'btn-red',
                    text: '是',
                    keys: ['enter'],
                    action: function () {
                        $(this).ajaxRequest("/BMS/Function/Delete", { id: id }, function () { dataBind(true) },false);
                    }
                },
                cancelAction: {
                    text: '再想想',
                    action: function () {

                    }
                }
            }
        });
    }
    /**
     * 列表编辑按钮事件
     * @param {any} row
     */
    function update(row) {
        $("#id").val(row.id);
        $('#pid').selectpicker('val', row.pid);
        $("#name").val(row.name);
        $("#url").val(row.url);
        $("#iconClassName").val(row.iconClassName);
        //手动触发一下input事件
        $("#iconClassName").trigger("input");
        $("#dialogModal").modal('show');
    }

    function bind() {
        //新增按钮事件
        $(document).on("click", "#btnAdd", function (event) {
            $("#id").val(0);
            $('#pid').selectpicker('val', '0');
            $("#name").val('');
            $("#url").val('');
            $("#iconClassName").val('');
            //手动触发一下input事件
            $("#iconClassName").trigger("input");
            $("#dialogModal").modal("show");
        })
        //图标事件
        $(document).on("input", "#iconClassName", function () {
            $(this).parent().find("span").html("<i class='mdi " + $(this).val() + "'></i>");
        })
        //模态框的保存事件
        $(document).on("click", "#btnSave", function () {
            if (!v.form()) {
                return;
            }
            //幂等
            $(this).attr('disable', true)
            $this = $(this)

            var id = $("#id").val();
            var pid = $("#pid").val();
            var name = $("#name").val();
            var url = $("#url").val();
            var iconClassName = $("#iconClassName").val();
            $(this).ajaxRequest("/BMS/Function/Save", { id: id, pid: pid, name: name, url: url, iconClassName: iconClassName, type: 0 }, function () {
                dataBind(true)
                $("#dialogModal").modal("hide");
            }, true, false, function () { $this.prop('disabled', false);})
        })
        //模态框消失事件
        $("#dialogModal").on("hidden.bs.modal", function (e) {
            $("#btnSave").prop('disabled', false)
        })
    }

    $(document).ready(function () {
        init();
        bind();
    })

});